<template>
    <div>
        <div class="recommend">
            <div class="content">
                <div class="title">
                    <hr>
                    <div class="title-text">
                        驾校推荐
                    </div>
                </div>
                <div class="drivingS">
                    <ul class="School">
                        <li v-for="(item,index) in recommendList" :key="index">
                            <div class="top">
                                <div class="DriveLeft">
                                    <div class="left1">
                                        <span class="name">{{item.name}}</span>
                                        <el-rate class="star" disabled v-model="item.score" >
                                        </el-rate>
                                    </div>
                                    <div class="left2">
                                        <div>
                                            <span>口碑好</span>
                                        </div>
                                        <div>
                                            <span>规模大</span>
                                        </div>
                                        <div>
                                            <span>拿本快</span>
                                        </div>
                                        <div>
                                            <span>包接送</span>
                                        </div>
                                    </div>
                                
                                </div>
                                <div class="DriveRight">
                                    <div class="right">
                                        <p class="price ">￥{{item.price}}</p>
                                        <button @click="open" class="btn-baoming">学车报名</button>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="pic">
                                    <img :src=item.avatar alt="">
                                </div>
                                <div class="evaluate">
                                    <p>{{item.content}}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="more">
                        <a target="_blank" href="https://www.jiakaobaodian.com/school/">查看更多</a>
                    </div>
                    
                </div>
            </div>
            
        </div>
        <div>
          <el-form v-show="isShow"  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-card>
              <div class="content">
                <div class="title">
                  <span>免费咨询</span>
                  <i @click="close"  class="icon-close" ref="close"></i>          
                </div>
                <span class="title2">留下您的联系方式，不久后会收到来电</span>
                <div class="bottom">
                  <el-form-item class="row row1" label="姓名" prop="name">
                    <el-input class="input" placeholder="请填写您的姓名" type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item class="row row2" label="手机" prop="mobile">
                    <el-input class="input" placeholder="请输入您的手机号" type="text" v-model="ruleForm.mobile" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item class="row row3" label="验证" prop="verify">
                    
                    <el-input class="input" placeholder="请输入验证码" type="text" v-model="ruleForm.verify" autocomplete="off"></el-input>
                    <el-button class="btn-get-sms">短信验证码</el-button>
                  </el-form-item>
                 
                  <el-form-item  class="row row4 select" label="驾照" prop="license">
                    <el-select class="type" v-model="ruleForm.license" placeholder="请选择活动区域">
                      <el-option label="c1小型汽车" value="c1小型汽车"></el-option>
                      <el-option label="c2小型自动挡汽车" value="c2小型自动挡汽车"></el-option>
                      <el-option label="D普通三轮摩托车" value="D普通三轮摩托车"></el-option>
                      <el-option label="E普通二轮摩托车" value="E普通二轮摩托车"></el-option>
                    </el-select>
                    
                  </el-form-item>
                  <el-form-item class="row row5" label="位置" prop="position">
                    <el-input class="input" type="text" v-model="ruleForm.position" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item class="row row6">
                    <el-button class="submit-btn" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  </el-form-item>
                </div>
              </div>
              <div class="agree">
                <input type="checkbox">同意
                <a href="https://laofuzi.kakamobi.com/agreements/privateAgreement.html?_productCategory=jiakaobaodian&amp;_product=%E9%A9%BE%E8%80%83%E5%AE%9D%E5%85%B8&amp;_appName=jiakaobaodian#/">《隐私政策》</a>和
                <a href="https://share-m.kakamobi.com/activity.kakamobi.com/jiakaobaodian-info-guard/">《个人信息保护声明》</a>
        
              </div>
            </el-card>
          </el-form>
        </div>
        </div>
</template>
<script>

    export default{
        
        data(){
          var validateName = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } 
          };
          var validateMobile = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入手机号'));
            } 
          };
          var validateVerify = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入验证码'));
            } 
          };
          var validateLicense = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('驾照不能为空'));
            } 
          };
          var validatePosition = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('位置不能为空'));
            } 
          };
          return {
            isShow: false,
            ruleForm: {
              name: '',
              mobile: '',
              verify: '',
              
              license: '',
              position: '',
            },
            rules: {
              name: [
                { validator: validateName, trigger: 'blur' }
              ],
              mobile: [
                { validator: validateMobile, trigger: 'blur' }
              ],
              verify: [
                { validator: validateVerify, trigger: 'blur' }
              ],
              license: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ],
              license: [
                { validator: validateLicense, trigger: 'blur' }
              ],
              position: [
                { validator: validatePosition, trigger: 'blur' }
              ],
            },
            recommendList:[
                {
                    "name": "龙泉驾校",
                    "score": 4,
                    "price": 3480,
                    "avatar": "https://avatar-user.mc-cdn.cn/user-avatar/2023/03/17/09/1cf0247531da417bbaf9cd51dd41721a.jpg!100x100",
                    "content": "龙泉不错，服务好"
                },
                {
                    "name": "公交驾校",
                    "price": 4900,
                    "score": 4.3,
                    "avatar": "https://avatar-user.mucang.cn/user-avatar/default/-fl6pQrH3OQ.jpg!100x100",
                    "content": "场地很好 教练也教的很好"
                },
                {
                    "name": "金菱驾校",
                    "score": 4.5,
                    "price": 3980,
                    "avatar": "https://avatar-user.mucang.cn/user-avatar/default/wtBex4wQw60.jpg!100x100",
                    "content": "特别感谢金菱驾校的教练和工作人员，他们态度好，耐心地回答我不明白的问题。更加更加感谢我的教练:牛迪教练，他很认真很细心的教我，很有耐心，我要好好学习科目二，争取考试的时候一次通过。"
                },
                {
                    "name": "嘉安驾校",
                    "price": 4000,
                    "score": 4.5,
                    "avatar": "https://avatar-user.mucang.cn/user-avatar/default/adK3Vu70DEQ.jpg!100x100",
                    "content": "。。。。。。。"
                }
            ],
          }
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          open (){
                  this.isShow = true
                },
          close(){
                  this.isShow = false
                }
        }
  }
</script>

<style lang="scss">
.recommend{
    .content{
        width: 1200px;
        margin: 60px auto;
        .title{
            margin-bottom: 40px;
            text-align: center;
            padding-top: 20px;
            hr{
                height: 1px;
                border: none;
                border-top:1px dotted #e9e9e9
            }
            .title-text{
                display: inline-block;
                margin-top: -20px;
                line-height: 41px;
                padding: 0 45px;
                background-color: #fff;
                font-size: 30px;
                
            }
        }
        .drivingS{
            width: 1200px;
            
            //background-color: palegoldenrod;
            .School{
                display: flex;
                flex-wrap: wrap;
                margin: -30px 0 0 -30px;
                color: #666;
                font-size: 14px;
                
                li{
                    float: left;
                    position: relative;
                    width: 585px;
                    margin: 30px 0 0 30px;
                    padding: 40px 30px;
                    border: 1px solid #e9e9e9;
                    .top{
                        display: flex;
                        justify-content: space-between;
                        .DriveLeft{
                            width: 305px;
                            line-height: 30px;
                            //border-right: 1px solid #e9e9e9;
                            .left1{
                                display: flex;
                                align-items: center;
                                .name{
                                    max-width: 180px;
                                    display: inline-block;
                                    vertical-align: middle;
                                    line-height: 30px;
                                    font-size: 22px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    margin-right: 10px;
                                }
                                .star{
                                    vertical-align: middle;
                                }
                                
                            }
                            .left2{
                                display: flex;
                                justify-content: space-between;
                                padding-right: 20px;
                                div{
                                    background: url(../assets/true.png) no-repeat left center ;
                                    padding-left: 20px
                                    
                                }
                            }
                        }
                        .DriveRight{
                            .right{
                                display: flex;
                                height: 70px;
                                .price{
                                    color: #EE4653;
                                    width: 130px;
                                    line-height: 70px;
                                    border-left: 1px solid #e9e9e9;
                                    font-size: 30px;
                                    text-align: center;
                                }
                                .btn-baoming{
                                    width: 80px;
                                    height: 28px;
                                    line-height: 28px;
                                    margin-top: 22px;
                                    text-align: center;
                                    font-size: 14px;
                                    border-radius: 4px;
                                    border: 1px solid #e9e9e9;
                                    background: 0 0;
                                    &:hover{
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                        
                    }
                    .bottom{
                        height: 80px;
                        margin-top: 30px;
                        padding: 20px;
                        background: #FAFAFA;
                        color: #999;
                        display: flex;
                        .pic{
                            img{
                                display: block;
                            width: 40px;
                            height: 40px;
                            }
                            
                        }
                        .evaluate{
                            height: 40px;
                            line-height: 20px;
                            margin-left: 20px;
                            overflow: hidden;
                        }
                    }
                }
            }
            .more{
                margin-top: 40px;
                display: block;
                width: 300px;
                margin: 15px auto 30px;
                border: none;
                display: block;
                height: 46px;
                text-align: center;
                line-height: 44px;
                margin: 20px auto;
                border: 1px solid #e9e9e9;
                &:hover {
                    border: 1px solid #37B5F8;
                    color: #37B5F8;
                }
              
            }
            
        }
    }
}

.demo-ruleForm{
      
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    .content{
      text-align: center;
      font-size: 16px;
      background-color: #fff;
      //padding-bottom: 30px;
      .title{
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
        color: #333;
        letter-spacing: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 7px 0;
  
        .icon-close{
          display: block;
          width: 17px;
          height: 17px;
          background: url(../assets/close.jpg) no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .title2{
        font-size: 14px;
        font-weight: 400;
        color: #999;
        line-height: 20px;
      }
      
      .bottom{
  
        .row{
          margin: 20px 0;
          span{
            font-size: 16px;
            display: inline-block;
            //width: 38px;
            text-align: right;
            vertical-align: middle;
            font-weight: 500;
            color: #333;
          }
          .input{
            height: 50px;
            width: 400px;
            margin-left: 20px;
            padding: 0 10px;
            font-size: 16px;
            overflow: hidden;
            border-radius: 4px;
            line-height: 50px;
            vertical-align: middle;
            color: #333;
            outline: 0;
            
          }
        }
        .row3{
          .input{
            width: 270px;
          }
          .btn-get-sms{
            width: 120px;
            height: 40px;
            //line-height: 40px;
            background: #04a5ff;
            border: none;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            margin-right: 10px;
            //margin-left: 10px;
            vertical-align: middle;
          }
          
        }
        .row4{
          height: 40px;
          .select{
            
            //width: 400px;
            //margin-left: 20px;
            padding: 0 10px;
            font-size: 16px;
            border: 1px solid #e9e9e9;
            overflow: hidden;
            border-radius: 4px;
            line-height: 50px;
            vertical-align: middle;
            color: #333;
          }
          .type{
            width: 400px;
            padding-left: 20px;
            appearance: none;
            
            //background: url(../assets/down.png) right 8px center no-repeat;
          }
        }
        .row6{
          margin-top: 30px;
          padding-right: 0;
          .submit-btn{
            display: block;
            width: 100%;
            height: 40px;
            //line-height: 50px;
            border: none;
            background: #04a5ff;
            border-radius: 4px;
            color: #fff;
            font-size: 18px;
          }
        }
      }
    }
    .agree{
      font-size: 14px;
      color: #333333;
      margin-top: 0px;
      text-align: center;
    }
  }
</style>